<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-row type="flex" justify="end">
        <el-button
          type="primary"
          size="small"
          @click="addPerm('0', '1')"
        >添加权限</el-button>
      </el-row>
      <el-card>
        <el-table border :data="tableData" row-key="id" default-expand-all>
          <el-table-column label="权限名称" prop="title" />
          <el-table-column label="权限标识" prop="code" />
          <el-table-column label="权限描述" prop="description" />
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <el-button
                v-if="row.pid === '0'"
                type="primary"
                size="small"
                @click="addPerm(String(row.id), '2')"
              >添加子权限</el-button>
              <el-button size="small" @click="editFn(row.id)">编辑</el-button>
              <el-button
                type="danger"
                size="small"
                @click="delFn(row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-row type="flex" justify="center">
          <el-pagination
            layout="prev, pager, next"
            :total="total"
            :page-size="pageSize"
            :current-page="currentPage"
            @current-change="CurrentChange"
          />
        </el-row>
      </el-card>
      <!-- 弹窗 -->
      <AddForm
        ref="addPerm"
        :show-dialog.sync="showDialog"
        @updateEvent="getPermissionList"
      />
    </div>
  </div>
</template>

<script>
import AddForm from './components/add-form.vue'
import {
  getPermissions,
  getPermissionCount,
  delPermissionById,
  getPermissionById } from '@/api/permission'
import { listToTree } from '@/utils/index'
import { Message } from 'element-ui'
export default {
  components: {
    AddForm
  },
  data() {
    return {
      // rawData: [], // 原始权限数据
      tableData: [], // 处理过的表格数据
      total: 0, // 权限数量
      pageSize: 10, // 每页显示条数
      currentPage: 1, // 当前页
      showDialog: false // 打开弹窗
    }
  },
  computed: {
    // 从第几条数据开始请求
    start() {
      return 0 + (this.currentPage - 1) * this.pageSize
    }
  },
  async created() {
    this.getPermissionList()
  },
  methods: {
    // 获取单个权限数据回显
    async editFn(id) {
      this.showDialog = true
      const res = await getPermissionById(id)
      // console.log(res)
      this.$refs.addPerm.AddForm = res.data
    },
    // 删除权限
    delFn(id) {
      this.$confirm('该操作将永久删除此权限，是否确认', '提示', {
        type: 'warning'
      }).then(async() => {
        await delPermissionById(id)
        await this.getPermissionList()
        Message.success('删除成功！')
      }).catch(() => {
        console.log('已取消删除')
      })
    },
    // 添加权限
    addPerm(pid, type) {
      this.showDialog = true
      this.$refs.addPerm.AddForm.pid = pid
      this.$refs.addPerm.AddForm.type = type
    },
    // 获取权限列表
    async getPermissionList() {
      // 获取权限数量
      const num = await getPermissionCount()
      this.total = num.data
      this.pageSize = num.data
      const res = await getPermissions({
        _limit: this.pageSize,
        _start: this.start
      })
      // console.log(res.data)
      this.tableData = listToTree(res.data, '0')
    },
    // 页数改变
    CurrentChange(val) {
      this.currentPage = val
      this.getPermissionList()
    }
  }
}
</script>

<style lang="scss" scoped>
.el-card {
  margin-top: 15px;
}
</style>
